<template>
  <div>
    <section class="data_section">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          选择：{{ "接口" + selectIndex}}
		  <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu
          slot="dropdown"
          style="height: 400px;overflow:scroll"
        >
            <el-dropdown-item command="1">接口1</el-dropdown-item>
            <el-dropdown-item command="2">接口2</el-dropdown-item>
            <el-dropdown-item command="3">接口3</el-dropdown-item>
            <el-dropdown-item command="4">接口4</el-dropdown-item>
            <el-dropdown-item command="5">接口5</el-dropdown-item>
            <el-dropdown-item command="6">接口6</el-dropdown-item>
            <el-dropdown-item command="7">接口7</el-dropdown-item>
            <el-dropdown-item command="8">接口8</el-dropdown-item>
            <el-dropdown-item command="9">接口9</el-dropdown-item>
            <el-dropdown-item command="10">接口10</el-dropdown-item>
            <el-dropdown-item command="11">接口11</el-dropdown-item>
            <el-dropdown-item command="12">接口12</el-dropdown-item>
            <el-dropdown-item command="13">接口13</el-dropdown-item>
            <el-dropdown-item command="14">接口14</el-dropdown-item>
            <el-dropdown-item command="15">接口15</el-dropdown-item>
            <el-dropdown-item command="16">接口16</el-dropdown-item>
            <el-dropdown-item command="17">接口17</el-dropdown-item>
            <el-dropdown-item command="18">接口18</el-dropdown-item>
            <el-dropdown-item command="19">接口19</el-dropdown-item>
            <el-dropdown-item command="20">接口20</el-dropdown-item>
            <el-dropdown-item command="21">接口21</el-dropdown-item>
            <el-dropdown-item command="22">接口22</el-dropdown-item>
            <el-dropdown-item command="23">接口23</el-dropdown-item>
            <el-dropdown-item command="24">接口24</el-dropdown-item>
            <el-dropdown-item command="25">接口25</el-dropdown-item>
            <el-dropdown-item command="26">接口26</el-dropdown-item>
            <el-dropdown-item command="27">接口27</el-dropdown-item>
            <el-dropdown-item command="28">接口28</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
      <div class="line1">
        <div id="line1" class="" style="width: 90%; height: 450px"></div>
      </div>
      <el-table
        :data="errorTableData"
        max-height="600"
        highlight-current-row
        style="width: 90%"
      >
        <el-table-column property="interface" label="" width="100">
        </el-table-column>
        <el-table-column property="ifSpeed" label="接口速率" width="120">
        </el-table-column>
        <el-table-column property="ifAva" label="接口利用率" width="120">
        </el-table-column>
        <el-table-column property="ifInPkts" label="接收包数" width="120">
        </el-table-column>
        <el-table-column property="ifOutPkts" label="发送包数" width="120">
        </el-table-column>
        <el-table-column property="ifInErrPer" label="接收错误率" width="120">
        </el-table-column>
        <el-table-column property="ifOutErrPer" label="发送错误率">
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";

import { get } from "../../request";

// import chart_json from "../../../json_data/chartData.json";
// import err_json from "../../../json_data/ErrPercent.json";
// import ava_json from "../../../json_data/Availability.json";

export default {
  data() {
    return {
      selectIndex: 1,
      errorTableData: [],
      chart_json: {},
      err_json: {},
      ava_json: {},
    };
  },
  components: {},
  mounted() {
    setInterval(this.sendRequest, 5000);
    this.initData()
  },
  computed: {},
  methods: {
    sendRequest() {
      get({
        url: "/getchartdata",
      })
        .then((res) => {
          // var json_data = res.data.data;
          console.log(res.data);
          this.chart_json = res.data.chart_json;
          this.err_json = res.data.err_json;
          this.ava_json = res.data.ava_json;
          this.initData();
        })
        .catch((res) => {
        });
    },
    handleCommand(command) {
      this.selectIndex = parseInt(command);
      this.initData();
    },
    initData() {
      this.errorTableData = [
        {
          interface: this.selectIndex,
          ifSpeed: this.ava_json.ifResult[this.selectIndex-1].speed + 'Mbps',
          ifAva:this.ava_json.ifResult[this.selectIndex-1].availability,
          ifInPkts: this.err_json.ifResult[this.selectIndex-1].ifInUcastPkts+this.err_json.ifResult[this.selectIndex-1].ifInUNcastPkts,
          ifOutPkts:  this.err_json.ifResult[this.selectIndex-1].ifOutUcastPkts+this.err_json.ifResult[this.selectIndex-1].ifOutUNcastPkts,
          ifInErrPer:  this.err_json.ifResult[this.selectIndex-1].inErrorRate,
          ifOutErrPer: this.err_json.ifResult[this.selectIndex-1].outErrorRate,
        },
      ];
      this.drawChart();
    },
    drawChart() {
      this.myChart = echarts.init(document.getElementById("line1"));
      // this.initData();
      const colors = ["#5793f3", "#675bba", "#d14a61", "#e5323e"];
      const option = {
        color: colors,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "接收字节数",
            "发送字节数",
            "接收出错报文数",
            "发送出错报文数",
          ],
        },
        xAxis: {
          type: "category",
          name: "Time",
          boundaryGap: false,
          data: this.chart_json.timeAxis,
        },
        yAxis: [
          {
            id: 0,
            type: "value",
            name: "kB",
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false,
            },
          },
          {
            id: 1,
            type: "value",
            name: "Pkts",
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "接收字节数",
            type: "line",
            yAxisIndex: 0,
            //   data: this.sevenDate[0],
            showSymbol: false,
            smooth: 0.7,
            data: this.chart_json.data[this.selectIndex - 1].receiveByte,
            animation: false,
          },
          {
            name: "发送字节数",
            type: "line",
            yAxisIndex: 0,
            //   data: this.sevenDate[1],
            showSymbol: false,
            smooth: 0.7,
            data: this.chart_json.data[this.selectIndex - 1].sendByte,
            animation: false,
          },
          {
            name: "接收出错报文数",
            type: "line",
            yAxisIndex: 1,
            showSymbol: false,
            data: this.chart_json.data[this.selectIndex - 1].newInErrors,
            animation: false,
            //   data: this.sevenDate[2],
          },
          {
            name: "发送出错报文数",
            type: "line",
            yAxisIndex: 1,
            //   data: this.sevenDate[3],
            showSymbol: false,
            data: this.chart_json.data[this.selectIndex - 1].newOutErrors,
            animation: false,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.data_section {
  padding: 20px;
  margin-bottom: 40px;
  .section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
}
.line1 {
  display: flex;
  justify-content: center;
}
</style>
